<template>
    <div class="input-body">
        <input class="input-main"
        :placeholder="placeholder"
        :type="type" :name="name"
        :disabled="disabled"
        :class="{'is-disabled':disabled}"
        :value="value" @input="haedInput">
    </div>
</template>
<script>
export default {
    props:{
        placeholder:{
            type:String,
            default:''
        },
        type:{
            type:String,
            default:'text',
        },
        name:{
            type:String,
            default:''
        },
        disabled:{
            type:Boolean,
            default:false
        },
        value:{
            type:String,
            default:''
        }
    },
    methods:{
       haedInput(e){
            this.$emit('input',e.target.value)
        }
    }
}
</script>
<style> 
 
*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
  .input-main{
      width:180px;
      height:40px;
      border-radius: 5px;
     border:1px solid #DCDFE6;
     text-indent: 1em;
  }
  .is-disabled{
      background-color:#F5F7FA;
      cursor: not-allowed;
  }
</style>